import React, {Component} from 'react';
import {connect} from 'dva';
import ReactDOM from 'react-dom';
import styles from './TagLandingPage.less';
import {Tabs, WhiteSpace, Badge, ListView} from 'antd-mobile';
import {StickyContainer, Sticky} from 'react-sticky';

const data = [
  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: 'Meet hotel',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
    title: 'McDonald\'s invites you',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
    title: 'Eat the week',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
];
const NUM_SECTIONS = 5;
const NUM_ROWS_PER_SECTION = 5;
let pageIndex = 0;

const dataBlobs = {};
let sectionIDs = [];
let rowIDs = [];

function genData(pIndex = 0) {
  for (let i = 0; i < NUM_SECTIONS; i++) {
    const ii = (pIndex * NUM_SECTIONS) + i;
    const sectionName = `Section ${ii}`;
    sectionIDs.push(sectionName);
    dataBlobs[sectionName] = sectionName;
    rowIDs[ii] = [];
    
    for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
      const rowName = `S${ii}, R${jj}`;
      rowIDs[ii].push(rowName);
      dataBlobs[rowName] = rowName;
    }
  }
  sectionIDs = [...sectionIDs];
  rowIDs = [...rowIDs];
}

class TagLandingPage extends Component {
  constructor(props) {
    super(props);
    
    const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
    const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
    
    const dataSource = new ListView.DataSource({
      getRowData,
      getSectionHeaderData: getSectionData,
      rowHasChanged: (row1, row2) => row1 !== row2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    });
    
    this.state = {
      dataSource,
      isLoading: true,
    }
  }
  
  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: 'tagLandingPage/getDetail',
      payload: {
        mode: '0',
        tag_name: '圣地巡礼',
        tab_id: '0'
      },
      callback: (value) => {
        dispatch({
          type: 'tagLandingPage/getList',
          payload: {
            mode: '0',
            tag_name: '圣地巡礼',
            tab_id: '0',
            boundary: '1-20',
            num: '20',
          }
        })
      }
    });
    
    // you can scroll to the specified position
    // setTimeout(() => this.lv.scrollTo(0, 120), 800);
    
    // simulate initial Ajax
    setTimeout(() => {
      genData();
      this.setState({
        dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
        isLoading: false,
      });
    }, 600);
  }
  
  onEndReached = (event) => {
    // load new data
    // hasMore: from backend data, indicates whether it is the last page, here is false
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    console.log('reach end', event);
    this.setState({isLoading: true});
    setTimeout(() => {
      genData(++pageIndex);
      this.setState({
        dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
        isLoading: false,
      });
    }, 1000);
  }
  
  render() {
    const {dispatch, tagLandingPage} = this.props;
    const {hotPlay, hotPlace, share_info, tabs, tag} = tagLandingPage;
    console.log(tagLandingPage);
    /*pubuliu*/
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 8,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );
    let index = data.length - 1;
    const row = (rowData, sectionID, rowID) => {
      if (index < 0) {
        index = data.length - 1;
      }
      const obj = data[index--];
      return (
        <div key={rowID} style={{padding: '0 15px'}}>
          <div
            style={{
              lineHeight: '50px',
              color: '#888',
              fontSize: 18,
              borderBottom: '1px solid #F6F6F6',
            }}
          >{obj.title}</div>
          <div style={{display: '-webkit-box', display: 'flex', padding: '15px 0'}}>
            <img style={{height: '64px', marginRight: '15px'}} src={obj.img} alt=""/>
            <div style={{lineHeight: 1}}>
              <div style={{marginBottom: '8px', fontWeight: 'bold'}}>{obj.des}</div>
              <div><span style={{fontSize: '30px', color: '#FF6E27'}}>35</span>¥ {rowID}</div>
            </div>
          </div>
        </div>
      );
    };
    /*-|-*/
    
    return (
      <div className={styles.container}>
        <header style={{backgroundImage: "url(" + tag.img_url + ")"}}>
          <div className={styles.headTitle}>
            <div className={styles.title}>{tag.title}</div>
            <div className={styles.countBox} dangerouslySetInnerHTML={{__html: tag.sub_title}}></div>
          </div>
        </header>
        
        <section className={styles.main}>
          <article className={styles.article}>
            {tag.description}
            {/*<span>...
              <span className={styles.unfold}>展开</span>
            </span>*/}
          </article>
          {/*<div className={styles.participants}>
            <div className={styles.headImgs}>
    
            </div>
            <div className={styles.participantNum}>363人参与></div>
          </div>*/}
          <div className={styles.divider}></div>
          {
            hotPlay.length > 0 && hotPlay.map((hotPlayItem, i) => {
              return (
                <div key={i}>
                  <div className={styles.mainTitle}>{hotPlayItem.title}</div>
                  <div className={styles.playBox}>
                    {hotPlayItem.items.length > 0 && hotPlayItem.items.map((item, index) => {
                      return (
                        <div key={index} className={styles.squareBox}>
                          <div className={styles.squareImg} style={{backgroundImage: "url(" + item.bg_img + ")"}}></div>
                          <div className={styles.squareTxt}>{item.title}</div>
                          <div className={styles.squareTags}>
                            {
                              item.tags.length && item.tags.map((tagItem, key) => {
                                return (
                                  <span key={key} className={styles.squareTag}
                                        style={{
                                          color: tagItem.image_tip_color,
                                          background: tagItem.image_tip_bg_color
                                        }}>{tagItem.text}</span>
                                )
                              })
                            }
                          </div>
                        </div>
                      )
                    })
                    }
                  </div>
                </div>
              )
            })
          }
          {
            hotPlace.length > 0 && hotPlace.map((hotPlaceItem, i) => {
              return (
                <div className="_mt40" key={i}>
                  <div className={styles.mainTitle}>{hotPlaceItem.title}</div>
                  <div className={styles.rectangleBox}>
                    {hotPlaceItem.items.length > 0 && hotPlaceItem.items.map((item, k) => {
                      return (
                        <div key={k} className={styles.rectangleItem}
                             style={{backgroundImage: "url(" + item.bg_img + ")"}}>
                          <div className={styles.rectangleModal}></div>
                          <div className={styles.rectangleTitle}>{item.title}</div>
                        </div>
                      )
                    })
                    }
                  </div>
                </div>
              )
            })
          }
          {/* 瀑布流/标题置顶 */}
          {/*<ListView
            ref={el => this.lv = el}
            dataSource={this.state.dataSource}
            className="am-list sticky-list"
            useBodyScroll
            renderSectionWrapper={sectionID => (
              <StickyContainer
                key={`s_${sectionID}_c`}
                className="sticky-container"
                style={{zIndex: 4}}
              />
            )}
            renderSectionHeader={sectionData => (
              <Sticky>
                {({
                    style,
                  }) => (
                  <div
                    className="sticky"
                    style={{
                      ...style,
                      zIndex: 3,
                      backgroundColor: parseInt(sectionData.replace('Section ', ''), 10) % 2 ?
                        '#5890ff' : '#F8591A',
                      color: 'white',
                    }}
                  >{`Task ${sectionData.split(' ')[1]}`}</div>
                )}
              </Sticky>
            )}
            renderHeader={() => <span>header</span>}
            renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
              {this.state.isLoading ? 'Loading...' : 'Loaded'}
            </div>)}
            renderRow={row}
            renderSeparator={separator}
            pageSize={4}
            onScroll={() => {
              console.log('scroll');
            }}
            scrollEventThrottle={200}
            onEndReached={this.onEndReached}
            onEndReachedThreshold={10}
          />*/}
          
          
          <div className={styles.tabBox}>
            <div className={styles.tabTitle}>
              <div className={styles.tabItem}>推荐</div>
              <div className={styles.tabItem}>最新</div>
            </div>
            <div className={styles.tabContent}>
              <div className={styles.wengStyle}>
              
              </div>
              <div className={styles.youjiStyle}>
              
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }
}

export default connect(({tagLandingPage}) => ({tagLandingPage}))(TagLandingPage)
